<template>
    <div class="app-container">
        <aside>横幅列表</aside>
        <el-table
            ref="dragTable"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column label="ID" prop="id" align="center" width="120">
                <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="拖动改变顺序" width="120">
                <svg-icon class="drag-handler" icon-class="drag" />
            </el-table-column>
            <el-table-column label="绑定文章ID" align="center" width="140px">
                <template slot-scope="{row}">
                    <router-link :to="'/post/edit/' + row.newsId">
                        <span class="link-type">{{ row.newsId }}</span>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column label="标题" min-width="200px">
                <template slot-scope="{row}">
                    <span>{{ row.keywords }}</span>
                </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="状态" width="120">
                <template slot-scope="{row}">
                    <el-tag :type="row.bannerStatus | statusTypeFilter">
                        {{ row.bannerStatus | statusNameFilter }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="340" class-name="small-padding fixed-width">
                <template slot-scope="{row, $index}">
                    <router-link :to="'/banner/edit/'+row.id">
                        <el-button type="primary" size="small" icon="el-icon-edit">
                            编辑
                        </el-button>
                    </router-link>
                    <el-button type="info" size="small" style="margin-left: 10px" icon="el-icon-setting" plain @click="handleStatusChange($index)">
                        切换状态
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteRow($index)" />
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180px" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.createTime }}</span>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
import waves from '@/directive/waves'
import Sortable from 'sortablejs'
import { deleteBanner, getBannerList, setBannerOrder, switchBannerStatus } from '@/api/banner' // waves directive

export default {
    name: 'BannerList',
    directives: { waves },
    filters: {
        statusTypeFilter(status) {
            const statusMap = ['info', 'success']
            return statusMap[status]
        },
        statusNameFilter(status) {
            const statusMap = ['隐藏', '显示']
            return statusMap[status]
        }
    },
    data() {
        return {
            list: null,
            sortable: null,
            idList: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            getBannerList().then(list => {
                this.list = list
                list.forEach(item => {
                    this.idList.push(item.id)
                })
                this.$nextTick(() => {
                    this.setSort()
                })
            })
        },
        setSort() {
            const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
            this.sortable = Sortable.create(el, {
                ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
                setData: function(dataTransfer) {
                    // to avoid Firefox bug
                    // Detail see : https://github.com/RubaXa/Sortable/issues/1012
                    dataTransfer.setData('Text', '')
                },
                onEnd: evt => {
                    this.sortable.options.disabled = true
                    const targetRow = this.idList.splice(evt.oldIndex, 1)[0]
                    this.idList.splice(evt.newIndex, 0, targetRow)
                    setBannerOrder(this.idList).then(() => {
                        this.sortable.options.disabled = false
                        this.$message.success('顺序更新成功')
                    })
                }
            })
        },
        handleStatusChange(index) {
            const _list = this.list
            switchBannerStatus(_list[index].id).then(() => {
                _list[index].bannerStatus = _list[index].bannerStatus === 0 ? 1 : 0
                this.$message({
                    type: 'success',
                    message: '状态修改成功'
                })
            })
        },
        deleteRow(index) {
            const id = this.list[index].id
            this.$confirm('此操作将永久删除横幅 ID:' + id + ', 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBanner(id).then(() => {
                    this.list.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>
<style>
.sortable-ghost{
    opacity: .8;
    color: #fff!important;
    background: #42b983!important;
}
.drag-handler{
    width: 16px !important;
    height: 16px !important;
    cursor: pointer;
}
</style>
